<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import { onMounted, ref } from 'vue';
import { invitePageInfo } from '@/api/home';
import { shareImage } from '@/api/share';
import { useUserStore } from '@/store/user';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const userStore = useUserStore();
const router = useRouter();
const vipShareTips1 = ref('');
const vipShareTips2 = ref('');
const staffShareTips1 = ref('');
const staffShareTips2 = ref('');

type shareInfoStruct = {
  title: string;
  icon: string;
};

const shareInfo = ref<shareInfoStruct>({
  title: '',
  icon: ''
});

const statusBarH = ref(0);
const popupRef = ref();
const info = ref({
  awardScore: 0,
  awardCommission: 0,
  getScore: 0,
  successMember: 0,
  getCommission: 0,
  withdrawPrice: 0
});

onShareAppMessage(() => {
  const params = {
    title: shareInfo.value.title == undefined ? '' : shareInfo.value.title,
    path: '/pages/home/home?referrer=' + userStore.user.id,
    imageUrl: shareInfo.value.icon
  };
  return params;
});

const showScore = ref(true);
const showCommission = ref(true);

async function getInfo() {
  const _isWechat = isWechat();
  const res = await invitePageInfo();
  info.value = res.data;
  showScore.value = res.data.awardScore > 0;
  showCommission.value = res.data.awardCommission > 0;
  const vipShareTips1Key = _isWechat
    ? 'LSHKey_shareInviteContentTips_MINI'
    : 'LSHKey_shareInviteContentTips';
  vipShareTips1.value = t(vipShareTips1Key, {
    score: '<span style="color: #FE5722;">' + res.data.awardScore + '</span>'
  });
  const vipShareTips2Key = _isWechat
    ? 'LSHKey_shareInviteContentTips2_MINI'
    : 'LSHKey_shareInviteContentTips2';
  vipShareTips2.value = t(vipShareTips2Key, {
    score: '<span style="color: #FE5722;">' + res.data.awardCommission + '%</span>'
  });
  const staffShareTips1Key = _isWechat
    ? 'LSHKey_shareInviteContentTips5_MINI'
    : 'LSHKey_shareInviteContentTips5';
  staffShareTips1.value = t(staffShareTips1Key, {
    score: '<span style="color: #FE5722;">' + res.data.awardScore + '</span>'
  });
  const staffShareTips2Key = _isWechat
    ? 'LSHKey_shareInviteContentTips4_MINI'
    : 'LSHKey_shareInviteContentTips5';
  staffShareTips2.value = t(staffShareTips2Key, {
    score: '<span style="color: #FE5722;">' + res.data.awardCommission + '%</span>'
  });
}

async function GetShareInfo() {
  const res = await shareImage({
    shareType: 'member'
  });
  shareInfo.value.title = res.data.title;
  shareInfo.value.icon = res.data.icon;
}

onMounted(async () => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
  await getInfo();
  // 获取分享信息
  await GetShareInfo();
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    backgroundColor="#EFF1F7"
    fixed
    left-icon="left"
    status-bar
    title=""
    @click-left="router.back"
  />
  <view :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }" class="share-contain">
    <view class="share-contain-top">
      <view class="share-contain-top-t">
        <view>
          {{
            userStore.user.rebateMode == 'MEMBER'
              ? t('LSHKey_shareFriend')
              : t('LSHKey_shareInviteCountTips8')
          }}
        </view>
        <view>
          {{
            userStore.user.rebateMode == 'MEMBER'
              ? t('LSHKey_shareFriendTips')
              : t('LSHKey_shareInviteCountTips6')
          }}
        </view>
      </view>
      <image src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/share_img.png" />
    </view>

    <button :title="shareInfo.title" class="share-contain-btn" open-type="share">
      {{ t('LSHKey_shareInvite') }}
    </button>

    <view class="share-contain-help">
      <view class="share-contain-help-title">
        {{
          userStore.user.rebateMode == 'MEMBER'
            ? t('LSHKey_shareInviteTips')
            : t('LSHKey_shareInviteCountTips9')
        }}
      </view>
      <view class="share-contain-help-subtitle">
        {{
          userStore.user.rebateMode == 'MEMBER'
            ? t('LSHKey_shareInviteContent')
            : t('LSHKey_shareInviteContent2')
        }}
      </view>
      <view v-if="showScore" class="share-contain-help-item">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_share_point.png"
        />
        <view v-if="userStore.user.rebateMode == 'MEMBER'" v-html="vipShareTips1"></view>
        <view v-else v-html="staffShareTips1"></view>
      </view>
      <view v-if="showCommission" class="share-contain-help-item">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_share_coupon.png"
        />
        <view v-if="userStore.user.rebateMode == 'MEMBER'" v-html="vipShareTips2"></view>
        <view v-else v-html="staffShareTips2"></view>
      </view>
    </view>
    <view class="share-contain-stat">
      <view class="share-contain-stat-title">{{ t('LSHKey_shareInviteCount') }}</view>
      <view v-if="userStore.user.rebateMode == 'MEMBER'" class="share-contain-stat-cont">
        <view class="share-contain-stat-cont-item">
          <view>{{ info.getScore }}</view>
          <view>{{ t('LSHKey_shareInviteCountTips') }}</view>
        </view>
        <view class="share-contain-stat-cont-item">
          <view>{{ info.successMember }}</view>
          <view>{{ t('LSHKey_shareInviteCountTips2') }}</view>
        </view>
      </view>
      <view v-else class="share-contain-stat-cont" style="flex-wrap: wrap">
        <view class="share-contain-stat-cont-item" style="width: 100%; margin-bottom: 20rpx">
          <view>{{ info.successMember }}</view>
          <view>{{ t('LSHKey_shareInviteCountTips2') }}</view>
        </view>
        <view class="share-contain-stat-cont-item">
          <view>{{ info.getCommission }}</view>
          <view>{{ t('LSHKey_shareInviteCountTips4') }}</view>
        </view>
        <view class="share-contain-stat-cont-item">
          <view>{{ info.withdrawPrice }}</view>
          <view>{{ t('LSHKey_shareInviteCountTips5') }}</view>
        </view>
      </view>
    </view>
    <view
      v-if="userStore.user.rebateMode == 'MEMBER'"
      class="share-contain-point"
      @click="router.to(RouteMap.pointsList)"
    >
      {{ t('LSHKey_shareInviteCountTips3') }}
    </view>
    <view v-else class="share-contain-point" @click="router.to(RouteMap.distributionIndex)">
      {{ t('LSHKey_shareInviteCountTips7') }}
    </view>
    <view class="share-contain-bottom">{{ t('LSHKey_shareInviteTips2') }}</view>
    <uni-popup
      ref="popupRef"
      :safe-area="true"
      background-color="#FFFFFF"
      borderRadius="20px"
      type="bottom"
    >
      <view class="share-popup">
        <view class="share-popup-item">
          <image src="/static/icon_share_btn1.png" />
          <view>{{ t('LCKey_download') }}</view>
        </view>
        <view class="share-popup-item">
          <image src="/static/icon_share_btn2.png" />
          <view>{{ t('LCKey_link') }}</view>
        </view>
        <view class="share-popup-item">
          <image src="/static/icon_share_btn3.png" />
          <view>{{ t('LCKey_wechat') }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.share {
  &-contain {
    background: #eff1f7;
    padding-bottom: 50rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

    &-top {
      display: flex;
      align-items: center;
      padding-left: 48rpx;
      padding-right: 18rpx;
      justify-content: space-between;

      &-t {
        view {
          &:first-child {
            font-weight: 400;
            font-size: 36rpx;
            color: #3d3d3d;
            line-height: 50rpx;
            margin-bottom: 2rpx;
          }

          &:last-child {
            font-weight: 600;
            font-size: 48rpx;
            color: #3d3d3d;
            line-height: 68rpx;
          }
        }
      }

      image {
        display: block;
        width: 220rpx;
        height: 248rpx;
      }
    }

    &-btn {
      margin: 40rpx 48rpx 50rpx;
      background: #269c74;
      border-radius: 20rpx;
      text-align: center;
      line-height: 92rpx;
      height: 92rpx;
      font-weight: 600;
      font-size: 28rpx;
      color: #ffffff;
    }

    &-help {
      margin: 0 48rpx;

      &-title {
        font-weight: 600;
        font-size: 40rpx;
        color: #3d3d3d;
        line-height: 56rpx;
        margin-bottom: 2rpx;
      }

      &-subtitle {
        font-weight: 400;
        font-size: 24rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }

      &-item {
        display: flex;
        align-items: center;
        margin-top: 34rpx;

        image {
          display: block;
          width: 92rpx;
          height: 92rpx;
        }

        view {
          margin-left: 40rpx;
          flex: 1;
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          line-height: 40rpx;

          text {
            color: #fe5722;
          }
        }
      }
    }

    &-stat {
      margin: 50rpx 48rpx 0;

      &-title {
        font-weight: 600;
        font-size: 40rpx;
        color: #3d3d3d;
        line-height: 56rpx;
      }

      &-cont {
        display: flex;
        margin-top: 40rpx;

        &-item {
          width: 50%;

          view {
            &:first-child {
              font-weight: 600;
              font-size: 40rpx;
              color: #fe5722;
              line-height: 56rpx;
              margin-bottom: 8rpx;
            }

            &:last-child {
              font-weight: 400;
              font-size: 24rpx;
              color: #3d3d3d;
              line-height: 34rpx;
            }
          }
        }
      }
    }

    &-point {
      margin: 40rpx 0 68rpx;
      padding: 0 48rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #007dff;
      line-height: 34rpx;
    }

    &-bottom {
      text-align: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #979797;
      line-height: 34rpx;
    }
  }

  &-popup {
    overflow: hidden;
    padding-top: 76rpx;

    &-item {
      width: 25%;
      float: left;
      margin-bottom: 28rpx;

      image {
        display: block;
        width: 88rpx;
        height: 88rpx;
        margin: 0 auto 8rpx;
      }

      view {
        font-weight: 400;
        font-size: 28rpx;
        color: #3d3d3d;
        line-height: 52rpx;
        text-align: center;
      }
    }
  }
}
</style>
